import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image, 
  Animated,
  Easing,
} from 'react-native';
import {createBottomTabNavigator, createAppContainer,createStackNavigator } from 'react-navigation';
import { Provider, connect } from 'react-redux';
import thunk from 'redux-thunk';
import { createStore, applyMiddleware} from 'redux';
import reducers from '@/reducers'
import Home from './views/home/'
import NewsDetail from './views/home/NewsDetail'
import Comp from './views/comp/'
import ImageUpload from './views/comp/ImageUpload'
import PersCenter from './views/persCenter/index'
//let store = createStore(reducers, applyMiddleware(thunk));
let store = createStore(reducers);
const navOptions = {
  headerStyle:{
    backgroundColor:'#00B560',//'#007751',
    height:44,
    fontWeight:'bold',
  },
  headerTitleStyle:{
    color:'#fff',
    fontSize:18,
    textAlign:'center',
    flex:1,
    fontWeight:'normal',
  },
}
//转场动画配置
const transitionConfig = {
  //screenInterpolator: StackViewStyleInterpolator.forHorizontal,
  transitionSpec: {
    duration: 300,
    easing: Easing.out(Easing.poly(4)),
    timing: Animated.timing,
  },
  screenInterpolator: sceneProps => {
    const { layout, position, scene } = sceneProps;
    const { index } = scene;

    const height = layout.initHeight;
    const width = layout.initWidth;
    const translateY = position.interpolate({
      inputRange: [index - 1, index, index + 1],
      outputRange: [height, 0, 0],
    });
    const translateX = position.interpolate({
      inputRange: [index - 1, index, index + 1],
      outputRange: [width, 0, 0],
    });

    const opacity = position.interpolate({
      inputRange: [index - 1, index - 0.99, index],
      outputRange: [0, 1, 1],
    });

    return { opacity, transform: [{ translateX }] };
  },
}
let HomeContainer = connect(state => (state.user))(Home);
const HomeStack = createStackNavigator(
  { 
    Home: HomeContainer,
    newsDetail: NewsDetail
  },
  {
    transitionConfig:()=>(transitionConfig),
    defaultNavigationOptions:navOptions
  }
);
HomeStack.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
  let routes = navigation.state.routes;
  // if(routes[routes.length-1].routeName == 'register' || routes[routes.length-1].routeName == 'login'){
  //   tabBarVisible = false;
  // }
  if(navigation.state.index > 0){
    tabBarVisible = false;
  }
  return {
    tabBarVisible,
  };
};
const CompStack = createStackNavigator(
  { 
    Comp,
    imageUpload: ImageUpload
  },
  {
    defaultNavigationOptions:navOptions
  }
);
CompStack.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
  if (navigation.state.index > 0) {
    tabBarVisible = false;
  }
  return {
    tabBarVisible,
  };
};
let PersCenterContainer = connect(state => (state.user))(PersCenter);
const PersCenterStack = createStackNavigator(
  { 
    PersCenter: PersCenterContainer
  },
  {
    transitionConfig:()=>(transitionConfig),
    defaultNavigationOptions:navOptions
  }
);
PersCenterStack.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
  let routes = navigation.state.routes;
  if(navigation.state.index > 0){
    tabBarVisible = false;
  }
  return {
    tabBarVisible,
  };
};
const TabNavigator = createBottomTabNavigator(
  {
    Home: HomeStack,
    Comp: CompStack,
    PersCenter: PersCenterStack,
  },
  {
    initialRouteName:'Home',
		lazy:true,
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        //console.log('routeName',routeName)
        let iconName;
        if (routeName === 'Home') {
          //iconName = `ios-information-circle${focused ? '' : '-outline'}`;
          iconName = focused ? require('./images/tab/icon_home_sel.png') : require('./images/tab/icon_home_nor.png');
        } else if (routeName === 'Comp') {
          iconName = focused ? require('./images/tab/icon_comp_sel.png') : require('./images/tab/icon_comp_nor.png');
        }  else if (routeName === 'PersCenter') {
          iconName = focused ? require('./images/tab/icon_center_sel.png') : require('./images/tab/icon_center_nor.png');
        }
        return <Image style={styles.tabIcon} source={iconName}/>;
      },
      tabBarLabel:({focused})=>{
        const { routeName } = navigation.state;
        //console.log('routeName',routeName)
        var textColor = focused ? "#007751" : "#9A9691";
        let title = "";
        if (routeName === 'Home') {
          title = "首页";
        } else if (routeName === 'Comp') {
          title = "组件";
        } else if (routeName === 'PersCenter') {
          title = "个人中心";
        }
        return <View style={styles.tabTextView}><Text style={{fontSize:13,color:textColor}}>{title}</Text></View>
      }
    }),
    tabBarOptions: {
      activeTintColor: '#007751',
      inactiveTintColor: '#9A9691',
    },
  }
);
const Navigator = createAppContainer(TabNavigator);
//export default createAppContainer(TabNavigator);
export default class Nav extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Navigator />
      </Provider>
    );
  }
}
const styles = StyleSheet.create({
  tabTextView:{
    justifyContent:'center',
    alignItems:'center',
  },
  tabIcon:{
    width:24,
    height:24,
    resizeMode:'contain'
  }
});